<template>
    <!--<div class="title">WUDAREN v1.0</div>-->
    <div class="btn">
      <!--<div class="bg1"></div>-->
      <img :src="navLeft" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}"/>
    </div>

</template>

<script>
import navLeft from '@/assets/home/navleft.png'
export default {
  name: 'hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    toggleClick: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      navLeft
    }
  }
}
</script>

<style scoped>
  .bg1{
    position:relative;
    left:0px;
    padding-left: 10px;
    bottom:19px;
    width:180px;
    line-height: 70px;
    height:50px;
    background-color: #25B6C7;
  }
  .title{
    font-size:12px;
    font-family:Arial-ItalicMT;
    font-weight:normal;
    color:rgba(255,255,255,1);
    line-height:50px;
    float: right;
    width: 130px;
  }
  .btn01{
    width: 50px;
    height: 50px;
    background-color: #0065c9;
    padding-left: 15px;
    margin-left: -10px;
    position: relative;
    z-index: 10;
  }
.hamburger {
	display: inline-block;
	cursor: pointer;
}
.hamburger.is-active {
	transform: rotate(180deg);
}
</style>
